<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>wordcloud</title>
		<script src="node_modules/echarts/dist/echarts.js" type="text/javascript" charset="utf-8"></script>
		<script src="node_modules/echarts-wordcloud/dist/echarts-wordcloud.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="main" style="width: 370px; height: 300px;"></div>

		<script type="text/javascript">
			var chart = echarts.init(document.getElementById('main'));

			chart.setOption({

				series: [{
					type: 'wordCloud',

					// The shape of the "cloud" to draw. Can be any polar equation represented as a
					// callback function, or a keyword present. Available presents are circle (default),
					// cardioid (apple or heart shape curve, the most known polar equation), diamond (
					// alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.
					//画出“云”的形状。可以用任何极坐标方程和回调函数来表示，也可以是一个关键字present。默认是圆形.
					//心形(苹果或心形曲线，最著名的极坐标方程)，菱形(正方形的别名)、三角向前的别名、三角形的别名、三角直立的别名、五边形的别名和星形的别名。

					shape: 'diamond',

					// A silhouette image which the white area will be excluded from drawing texts.
					// The shape option will continue to apply as the shape of the cloud to grow.
					//剪影图像，白色区域将被排除在绘图文本之外,形状选项将继续应用为云的形状。

					// maskImage: maskImage,

					// Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
					// Default to be put in the center and has 75% x 80% size.
					//用左/上/宽/高/右/底向下移动来定位单词cloud
					//默认设置为放在中间，大小为75% x 80%。

					left: 'center',
					top: 'center',
					// width: '70%',
					// height: '80%',
					width: '90%',
					height: '90%',
					right: null,
					bottom: null,

					// Text size range which the value in data will be mapped to.
					// Default to have minimum 12px and maximum 60px size.
					//将数据中的值映射到的文本大小范围。
					//默认值为最小12px和最大60px。

					sizeRange: [12, 60],

					// Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45
					//文本旋转范围和步长。文本将通过rotationStep 45在[- 90,90]范围内随机旋转

					// rotationRange: [-90, 90],
					rotationRange: [0,0],
					rotationStep: 45,

					// size of the grid in pixels for marking the availability of the canvas
					// the larger the grid size, the bigger the gap between words.
					//网格的大小(以像素为单位)，用于标记画布的可用性
					//网格越大，单词之间的间隔就越大。

					gridSize: 15,

					// set to true to allow word being draw partly outside of the canvas.
					// Allow word bigger than the size of the canvas to be drawn
					//设置为true，允许在画布外部绘制部分文字。
					//允许绘制比画布大的单词
					drawOutOfBound: false,

					// Global text style
					textStyle: {
						normal: {
							fontFamily: 'sans-serif',
							fontWeight: 'bold',
							// Color can be a callback function or a color string
							color: function() {
								// Random color
								return 'rgb(' + [
									Math.round(Math.random() * 160),
									Math.round(Math.random() * 160),
									Math.round(Math.random() * 160)
								].join(',') + ')';
							}
						},
						emphasis: {
							shadowBlur: 10,
							shadowColor: '#333'
						}
					},

					// Data is an array. Each array item must have name and value property.
					// Data是一个数组。每个数组项必须具有name和value属性。
					data: [
						// {
						// 	name: 'Farrah Abraham',
						// 	value: 366,
						// 	// Style of single text
						// 	textStyle: {
						// 		normal: {},
						// 		emphasis: {}
						// 	}
						// }
						{
							name: " 大数据",
							value: 30
						},
						{
							name: " 护肤",
							value: 24
						},
						{
							name: " APP",
							value: 21
						},
						{
							name: " 平行车",
							value: 19
						},
						{
							name: " 热卖",
							value: 18
						},
						{
							name: " 跨境",
							value: 18
						},
						{
							name: " 社区",
							value: 17
						},
						{
							name: " 美容",
							value: 12
						},
						{
							name: " 奶粉",
							value: 12
						},
						{
							name: " 90后",
							value: 12
						},
						{
							name: " 雷朋",
							value: 11
						},
						{
							name: " YSL",
							value: 11
						},
						{
							name: " 口红",
							value: 10
						},
						{
							name: " 线上",
							value: 9
						},
						{
							name: " 互联网",
							value: 9
						},
						{
							name: " 网络",
							value: 9
						},
						{
							name: " 跨境",
							value: 9
						},
						{
							name: " 香水",
							value: 8
						},
						{
							name: " 护肤品",
							value: 8
						},
						{
							name: " 微店",
							value: 8
						},
						{
							name: " 包邮包税",
							value: 8
						},
						{
							name: " 秒杀",
							value: 8
						},
						{
							name: " 保温杯",
							value: 8
						},
						{
							name: " 威化饼",
							value: 8
						},
						{
							name: " 这样",
							value: 6
						},
						{
							name: " 性价比",
							value: 6
						},
						{
							name: " 一般般",
							value: 6
						},
						{
							name: " 出现",
							value: 6
						},
						{
							name: " 以前",
							value: 6
						},
						{
							name: " 知道",
							value: 6
						},
						{
							name: " 一次",
							value: 6
						}
					]
				}]
			});
		</script>
	</body>
</html>
